<template>
    <div class="boxBottom" >
        <van-tabbar active-color="red" v-model="active" @change="changeNav(active)">
        <van-tabbar-item  icon="home-o" replace to="/list" >电影</van-tabbar-item>
        <van-tabbar-item  icon="search" replace to="/cinemas">影院</van-tabbar-item>
        <van-tabbar-item  icon="setting-o" replace to="/center">我的</van-tabbar-item>
</van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import listStore from '../store';
import axios from 'axios';

const active = ref(0)
const store = listStore()
// 切换标签时触发
const changeNav = ((active)=>{
    
    // 用户切换到了电影页面
    if(active === 0) {
        console.log("回到电影");
        store.total = 0  // 必须重置为0 否则load事件不生效
        store.finished = false
        store.pageNum = 1
        // store.mainDataList = [ ]
        onLoad()
    }
})

const onLoad = async() => {  
   
   if(store.total === store.mainDataList.length && store.total !== 0) {

      // 数据全部加载完成
      console.log("数据取完");
      console.log("到底了");
    store.finished = true
    store.pageNum = 1
     return
   }
 //   store.getList(store.pageNum++,type.value)
   store.pageNum++
     const res =  await axios({  
         url:`https://m.maizuo.com/gateway?cityId=${store.cityId}&pageNum=${store.pageNum}&pageSize=10&type=1&k=4231560`,
         headers:{
             'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"16923257271850709997780993","bc":"110100"}',
             'X-Host':'mall.film-ticket.film.list'
         }
 })
 console.log(store.total,"....",store.mainDataList.length);
  
 store.mainDataList = [...store.mainDataList,...res.data.data.films]
  // 加载状态结束
  store.loading = false;
   
 };


</script>



<style scoped>
.boxBottom {
    position: fixed;
    /* bottom: 50px !important;
    left: 0;
    width: 100%;
    z-index: 10; */
}

</style>